import React, { Component } from 'react'
import { Card, Button, Modal } from 'antd'
import './index.less'

class Modals extends Component {
    state = {
        text: '稻城小号',
        visible: false,
        confirmLoading: false
    }
    handleClick = () => {
        this.setState({
            visible: true
        })
    }
    showModal = () => {
        this.setState({
            visible: true,
            loading: false,
        })
    }
    handleOk = () => {
        // this.setState({
        //     visible: false
        // })
        this.setState({
            text: '真的稻城',
            confirmLoading: true,
            loading: true
        })
        setTimeout(() => {
            this.setState({
                visible: false,
                confirmLoading: false
            })
        }, 2000)
    }
    handleCancel = () => {
        this.setState({
            visible: false
        })
    }

    info =()=>{
        Modal.info({
            title: 'this is info',
            content: (
                <div>
                    <span>info</span>
                    <span>1</span>
                    <span>info</span>
                </div>
            ),
            onOk(){}
        })
    }
    success =()=>{
        Modal.success({
            title: 'this is success',
            content: (
                <div>
                    <span>success</span>
                    <span>1</span>
                    <span>success</span>
                </div>
            ),
            onOk(){}
        })
    }
    error =()=>{
        Modal.error({
            title: 'this is error',
            content: (
                <div>
                    <span>error</span>
                    <span>1</span>
                    <span>error</span>
                </div>
            ),
            onOk(){}
        })
    }
    warning =()=>{
        Modal.warning({
            title: 'this is warning',
            content: (
                <div>
                    <span>warning</span>
                    <span>1</span>
                    <span>warning</span>
                </div>
            ),
            onOk(){}
        })
    }
    render() {
        const { text, visible, confirmLoading, loading } = this.state
        return (
            <div>
                <Card title="对话框组件" className="card-wrap">
                    <Button type="primary" onClick={this.handleClick}>click me</Button>
                    <Modal
                        title="这是标题"
                        visible={visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                    >
                        <p>就是这样</p>
                    </Modal>
                </Card>
                <Card title="异步关闭对话框组件" className="card-wrap">
                    <Button type="primary" onClick={this.showModal}>{text}</Button>
                    <Modal
                        title="这是标题"
                        visible={visible}
                        onOk={this.handleOk}
                        confirmLoading={confirmLoading}   //确定框loading
                        onCancel={this.handleCancel}
                    >
                        <p>就是这样</p>
                    </Modal>
                </Card>
                <Card title="自定义页脚" className="card-wrap">
                    <Button type="primary" onClick={this.handleClick}>click me</Button>
                    <Modal
                        title={text}
                        visible={visible}
                        onCancel={this.handleCancel}
                        footer={[
                            <Button type="primary" onClick={this.handleCancel}>取消</Button>,
                            <Button type="primary" loading={loading} onClick={this.handleOk}>提交</Button>,
                        ]}
                    >
                        <p>发生了什么</p>
                    </Modal>
                </Card>
                <Card title="信息提示对话框组件" className="card-wrap">
                    <Button onClick={this.info}>info</Button>
                    <Button type="primary" onClick={this.success}>success</Button>
                    <Button type="warning" onClick={this.warning}>warning</Button>
                    <Button type="danger" onClick={this.error}>error</Button>
                </Card>
            </div>
        )
    }
}
export default Modals